<template>
  <div class="comment-section">
    <h3>评论</h3>
    <div class="comments-list">
      <div v-for="comment in comments" :key="comment.id" class="comment">
        <img
          :src="comment.author.avatar"
          :alt="comment.author.name"
          class="avatar"
        />
        <div class="comment-content">
          <h4>{{ comment.author.name }}</h4>
          <p>{{ comment.content }}</p>
          <span class="comment-time">{{ formatDate(comment.createdAt) }}</span>
          <button @click="showReplyInput(comment.id)" class="reply-button">
            回复
          </button>
          <div
            v-if="comment.replies && comment.replies.length > 0"
            class="replies"
          >
            <div v-for="reply in comment.replies" :key="reply.id" class="reply">
              <img
                :src="reply.author.avatar"
                :alt="reply.author.name"
                class="avatar"
              />
              <div class="reply-content">
                <h5>{{ reply.author.name }}</h5>
                <p>{{ reply.content }}</p>
                <span class="reply-time">{{
                  formatDate(reply.createdAt)
                }}</span>
              </div>
            </div>
          </div>
          <div v-if="replyingTo === comment.id" class="add-reply">
            <textarea
              v-model="newReply"
              rows="1.2"
              cols="16"
              placeholder="回复评论..."
            />
            <button @click="submitReply(comment.id)">发送</button>
          </div>
        </div>
      </div>
    </div>
    <div class="add-comment">
      <textarea
        v-model="newComment"
        placeholder="添加评论..."
        rows="1.5"
        cols="22"
      />
      <button @click="submitComment">发送</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  postId: {
    type: Number,
    required: true
  }
})
console.log(props)
const comments = ref([
  {
    id: 1,
    author: {
      name: '王五',
      avatar: 'https://randomuser.me/api/portraits/men/3.jpg'
    },
    content: '这个职位看起来很有趣！',
    createdAt: '2023-05-20T11:30:00Z',
    replies: []
  },
  {
    id: 2,
    author: {
      name: '赵六',
      avatar: 'https://randomuser.me/api/portraits/women/4.jpg'
    },
    content: '请问有远程工作的机会吗？',
    createdAt: '2023-05-20T12:15:00Z',
    replies: []
  }
])

const newComment = ref('')
const newReply = ref('')
const replyingTo = ref(null)

const submitComment = () => {
  if (newComment.value.trim()) {
    const comment = {
      id: Date.now(),
      author: {
        name: '当前用户',
        avatar: 'https://randomuser.me/api/portraits/men/1.jpg'
      },
      content: newComment.value,
      createdAt: new Date().toISOString(),
      replies: []
    }
    comments.value.push(comment)
    newComment.value = ''
  }
}

const showReplyInput = (commentId) => {
  replyingTo.value = commentId
}

const submitReply = (commentId) => {
  if (newReply.value.trim()) {
    const reply = {
      id: Date.now(),
      author: {
        name: '当前用户',
        avatar: 'https://randomuser.me/api/portraits/men/1.jpg'
      },
      content: newReply.value,
      createdAt: new Date().toISOString()
    }
    const comment = comments.value.find((c) => c.id === commentId)
    if (comment) {
      if (!comment.replies) {
        comment.replies = []
      }
      comment.replies.push(reply)
    }
    newReply.value = ''
    replyingTo.value = null
  }
}

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>

<style scoped>
.comment-section {
  margin-top: 20px;
  max-width: 260px;
}

.comments-list {
  max-height: 400px;
  overflow-y: auto;
}

.comment,
.reply {
  display: flex;
  margin-bottom: 15px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
}

.comment-content,
.reply-content {
  flex: 1;
}

.comment-content h4,
.reply-content h5 {
  margin: 0;
  font-size: 14px;
  color: #1e40af;
}

.comment-content p,
.reply-content p {
  margin: 5px 0;
  font-size: 14px;
}

.comment-time,
.reply-time {
  font-size: 12px;
  color: #6b7280;
}

.reply-button {
  background: none;
  border: none;
  color: #4b5563;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  margin-top: 5px;
}

.replies {
  margin-left: 20px;
  margin-top: 10px;
}

.add-comment,
.add-reply {
  display: flex;
  margin-top: 15px;
}

.add-comment textarea,
.add-reply textarea {
  flex: 1;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  margin-right: 10px;
}

.add-comment button,
.add-reply button {
  padding: 8px 16px;
  background-color: #1e40af;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
